<style>
    .venue_warp{
        width: 100%;
    }
    .venue_warp li{
        float: left;

        display: inline-block;
        margin-bottom: 20px;
        border-radius: 6px;
    }

    .venue_warp li a{
        display: block;
        margin-right: 10px;
        border-bottom: 3px solid transparent;
        transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        font-size: 0;
    }

    .venue_warp li a .imgbox {
        cursor: pointer;
        display: inline-block;
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .imgbox img{
        height: 200px;
        width: 100%;
    }
    .imgbox-corner-mark {
        position: absolute;
        top: 0;
        left: 0;
    }
    .venue_warp li .mes {
        background: #fff;
        padding: 5px 5px 3px;
        line-height: 20px;
        font-size: 12px;
        height: 48px;
        overflow: hidden;
    }
    .mes .mes-tit{
        position: relative;
    }
    .mes .mes-tit h3 {
        width: 70%;
        font-size: 14px;
        color: #313131;
    }
   .mes .mes-tit .tag {
        display: block;
        width: 60px;
        font-size: 12px;
        text-align: right;
        color: #f60;
        position: absolute;
        right: 0;
        top: 0;
    }

</style>
<#import "../../content/page.html" as page><@page.layout "场地",1>
    <div class="container-fluid">
        <div class="fr">
            <button type="button" class="btn btn-success"><i class="qdy icon-tianjia"></i> 添加</button>
        </div>
    </div>
    <ul class="venue_warp clearfix  x4 mt10">
        <li >
            <a>
                        <span class="imgbox">
                            <span class="imgbox-corner-mark"></span>
                            <img  src="https://rpic.douyucdn.cn/a1704/15/14/288016_170415142316.jpg" width="283" height="163" style="display: block;">
                        </span>
                <div class="mes">
                    <div class="mes-tit">
                        <h3 class="ellipsis"> LPL春季赛OMG vs IG 正在直播 </h3>
                        <span class="tag ellipsis">2012/12</span>
                    </div>

                </div>
            </a>

        </li>
        <li >
            <a>
                        <span class="imgbox">
                            <span class="imgbox-corner-mark"></span>
                            <img  src="https://rpic.douyucdn.cn/a1704/15/14/288016_170415142316.jpg" width="283" height="163" style="display: block;">
                        </span>
                <div class="mes">
                    <div class="mes-tit">
                        <h3 class="ellipsis">
                            LPL春季赛OMG vs IG 正在直播                        </h3>
                        <span class="tag ellipsis">英雄联盟</span>
                    </div>

                </div>
            </a>

        </li>
        <li >
            <a>
                        <span class="imgbox">
                            <span class="imgbox-corner-mark"></span>
                            <img  src="https://rpic.douyucdn.cn/a1704/15/14/288016_170415142316.jpg" width="283" height="163" style="display: block;">
                        </span>
                <div class="mes">
                    <div class="mes-tit">
                        <h3 class="ellipsis">
                            LPL春季赛OMG vs IG 正在直播                        </h3>
                        <span class="tag ellipsis">英雄联盟</span>
                    </div>

                </div>
            </a>

        </li>
        <li >
            <a>
                        <span class="imgbox">
                            <span class="imgbox-corner-mark"></span>
                            <img  src="https://rpic.douyucdn.cn/a1704/15/14/288016_170415142316.jpg" width="283" height="163" style="display: block;">
                        </span>
                <div class="mes">
                    <div class="mes-tit">
                        <h3 class="ellipsis">
                            LPL春季赛OMG vs IG 正在直播                        </h3>
                        <span class="tag ellipsis">英雄联盟</span>
                    </div>

                </div>
            </a>

        </li>
    </ul>

</@page.layout>